<template>
  <div class="full-control-container">
    <div class="control-panel">
      <h2>完全控制面板</h2>
      
      <div class="user-info">
        <p>当前用户ID: {{ userId }}</p>
        <p>用户名: {{ userName }}</p>
        <p>用户位置编号: {{ copyNum >= 0 ? copyNum : '未设置' }}</p>
      </div>
      
      <div class="control-buttons">
        <button 
          @click="requestControl" 
          :disabled="isLoading || !userId"
          class="request-btn"
        >
          {{ isLoading ? '请求中...' : '请求完全控制' }}
        </button>
        
        <button 
          v-if="controlData" 
          @click="openControlPage" 
          class="open-btn"
        >
          打开控制页面
        </button>
      </div>
      
      <div v-if="error" class="error-message">
        <p>错误: {{ error }}</p>
      </div>
      
      <div v-if="controlData" class="control-data">
        <h3>控制信息</h3>
        <p>状态码: {{ controlData.code }}</p>
        <p>类型: {{ controlData.data.type }}</p>
        <p>URL: {{ controlData.data.url }}</p>
        <p>取消链接文本: {{ controlData.data.unlinkText }}</p>
        <p>响应消息: {{ controlData.message }}</p>
        
        <div v-if="controlData.data.currentUsers" class="current-users">
          <h4>当前用户状态</h4>
          <div class="users-grid">
            <div 
              v-for="(user, index) in controlData.data.currentUsers" 
              :key="index"
              class="user-slot"
              :class="{ active: user > 0 }"
            >
              <span class="slot-index">{{ index + 1 }}</span>
              <span class="slot-value">{{ user }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/store/user.js';
import { requestFullControl } from '@/api/util.js';

export default {
  name: 'FullControlPanel',
  setup() {
    const userStore = useUserStore();
    const isLoading = ref(false);
    const error = ref(null);
    const controlData = ref(null);
    
    // 获取用户ID
    const userId = computed(() => userStore.userInfo.id);
    const userName = computed(() => userStore.userInfo.account);
    const copyNum = computed(() => userStore.getCopyNum);
    
    // 请求完全控制
    const requestControl = async () => {
      if (!userId.value) {
        error.value = '用户未登录或用户ID无效';
        return;
      }
      
      isLoading.value = true;
      error.value = null;
      
      try {
        const response = await requestFullControl(userId.value);
        controlData.value = response;
        console.log('完全控制请求成功:', response);
        
        // 将copyNum保存到user store中
        if (response.copyNum !== undefined) {
          userStore.setCopyNum(response.copyNum);
          console.log('用户在currentUsers数组中的位置(copyNum):', response.copyNum);
        }
      } catch (err) {
        error.value = err.message || '请求完全控制失败';
        console.error('请求完全控制错误:', err);
      } finally {
        isLoading.value = false;
      }
    };
    
    // 打开控制页面
    const openControlPage = () => {
      if (controlData.value && controlData.value.data.url) {
        window.open(controlData.value.data.url, '_blank');
      }
    };
    
    // 组件挂载时检查用户登录状态
    onMounted(() => {
      if (!userId.value) {
        console.warn('用户未登录，无法请求完全控制');
      }
      
      // 恢复copyNum值
      userStore.restoreCopyNum();
    });
    
    return {
      userId,
      userName,
      copyNum,
      isLoading,
      error,
      controlData,
      requestControl,
      openControlPage
    };
  }
};
</script>

<style scoped>
.full-control-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.control-panel {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.user-info {
  background-color: #e9f7fe;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.user-info p {
  margin: 5px 0;
  font-size: 16px;
}

.control-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.request-btn, .open-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.request-btn {
  background-color: #4CAF50;
  color: white;
}

.request-btn:hover:not(:disabled) {
  background-color: #45a049;
}

.request-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.open-btn {
  background-color: #2196F3;
  color: white;
}

.open-btn:hover {
  background-color: #0b7dda;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.control-data {
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 6px;
}

.control-data h3 {
  margin-top: 0;
  color: #2e7d32;
}

.control-data p {
  margin: 8px 0;
}

.current-users {
  margin-top: 15px;
}

.current-users h4 {
  margin-bottom: 10px;
  color: #2e7d32;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.user-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  transition: all 0.2s;
}

.user-slot.active {
  background-color: #c8e6c9;
  border-color: #4CAF50;
}

.slot-index {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.slot-value {
  font-weight: bold;
  font-size: 14px;
}
</style>